<template>
    <n-grid :x-gap="16" :y-gap="16" :item-responsive="true">
        <n-grid-item span="0:24 640:24 1024:6">
            <n-card :bordered="false" class="rounded-8px shadow-sm">
                <div class="w-full h-360px py-12px">
                    <h3 class="text-16px font-bold">Dashboard</h3>
                    <p class="text-#aaa">Overview Of Lasted Month</p>
                    <h3 class="pt-32px text-24px font-bold">
                        <count-to prefix="$" :start-value="0" :end-value="7754" />
                    </h3>
                    <p class="text-#aaa">Current Month Earnings</p>
                    <h3 class="pt-32px text-24px font-bold">
                        <count-to :start-value="0" :end-value="1234" />
                    </h3>
                    <p class="text-#aaa">Current Month Sales</p>
                    <n-button class="mt-24px whitespace-pre-wrap" type="primary"
                        >Last Month Summary</n-button
                    >
                </div>
            </n-card>
        </n-grid-item>
        <n-grid-item span="0:24 640:24 1024:10">
            <n-card :bordered="false" class="rounded-8px shadow-sm">
                <div ref="lineRef" class="w-full h-360px"></div>
            </n-card>
        </n-grid-item>
        <n-grid-item span="0:24 640:24 1024:8">
            <n-card :bordered="false" class="rounded-8px shadow-sm">
                <div ref="pieRef" class="w-full h-360px"></div>
            </n-card>
        </n-grid-item>
    </n-grid>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { Ref } from 'vue'
import { type ECOption, useEcharts } from '@/composables'

defineOptions({ name: 'DashboardAnalysisTopCard' })

const lineOptions = ref<ECOption>({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    legend: {
        data: ['下载量', '注册数']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: [
                '06:00',
                '08:00',
                '10:00',
                '12:00',
                '14:00',
                '16:00',
                '18:00',
                '20:00',
                '22:00',
                '24:00'
            ]
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            color: '#8e9dff',
            name: '下载量',
            type: 'line',
            smooth: true,
            stack: 'Total',
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0.25,
                            color: '#8e9dff'
                        },
                        {
                            offset: 1,
                            color: '#fff'
                        }
                    ]
                }
            },
            emphasis: {
                focus: 'series'
            },
            data: [4623, 6145, 6268, 6411, 1890, 4251, 2978, 3880, 3606, 4311]
        },
        {
            color: '#26deca',
            name: '注册数',
            type: 'line',
            smooth: true,
            stack: 'Total',
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0.25,
                            color: '#26deca'
                        },
                        {
                            offset: 1,
                            color: '#fff'
                        }
                    ]
                }
            },
            emphasis: {
                focus: 'series'
            },
            data: [2208, 2016, 2916, 4512, 8281, 2008, 1963, 2367, 2956, 678]
        }
    ]
}) as Ref<ECOption>
const { domRef: lineRef } = useEcharts(lineOptions)

const pieOptions = ref<ECOption>({
    tooltip: {
        trigger: 'item'
    },
    legend: {
        bottom: '1%',
        left: 'center',
        itemStyle: {
            borderWidth: 0
        }
    },
    series: [
        {
            color: ['#5da8ff', '#8e9dff', '#fedc69', '#26deca'],
            name: '时间安排',
            type: 'pie',
            radius: ['45%', '75%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 1
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '12'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                { value: 20, name: '学习' },
                { value: 10, name: '娱乐' },
                { value: 30, name: '工作' },
                { value: 40, name: '休息' }
            ]
        }
    ]
}) as Ref<ECOption>
const { domRef: pieRef } = useEcharts(pieOptions)
</script>

<style scoped></style>
